<template>
  <div class="mac_config">
    <ga-space direction="vertical" fill>
      <div class="card_item flex" v-for="item in typeList" :key="item.value">
        <div class="item_l flex_center">
          <SvgIcon name="bronze_medal" size="20px" />
          <p>{{ item?.label }}</p>
        </div>
        <div class="item_r">
          SDASDASDSADASDSADASDSADSADASDSADSADASDSAD
          <ga-tag size="mini" class="tag_style" :color="colors['success']">
            {{ "正常" }}
          </ga-tag>
        </div>
      </div>
    </ga-space>
  </div>
</template>

<script setup>
import { ref, defineEmits, defineExpose } from "vue";
import TagStatus from "@/components/TagStatus/index.vue";
// const props = defineProps({
//   // 标题
//   title: {
//     type: String,
//     default: "温馨提示",
//   },
// });
// const emits = defineEmits(["handleSubmit"]);
// defineExpose({});
// const handleTabChange = (tab) => {
//   emits('handleTabChange', tab)
// }
const colors = {
  success: "#00b42a",
  error: "#ff5722",
};
const typeList = [
  { value: "cpu", label: "CPU" },
  { value: "memory", label: "内存" },
  { value: "array_card", label: "阵列卡" },
  { value: "ssd", label: "磁盘" },
  { value: "image", label: "磁盘" },
  { value: "image", label: "图像处理器" },
  { value: "network_card", label: "网卡" },
];
</script>

<style lang="scss" scoped>
.mac_config {
  width: 40%;
  .card_item {
    height: 80px;
    border: 1px solid #e2e8f4;
    background: #f7f9fc;
    border-radius: 4px;
    .item_l {
      width: 100px;
      background: #eff3f9;
      flex-direction: column;
      p {
        padding-top: 8px;
        color: #2c4068;
      }
    }
    .item_r {
      flex: 1;
      line-height: 80px;
      padding-left: 16px;
      position: relative;
      color: #2c4068;
      .tag_style {
        border-radius: 10px;
        position: absolute;
        right: 8px;
        top: 8px;
      }
    }
  }
}
</style>
